import styled from "styled-components";
import { SettingOutlined } from "@ant-design/icons";
import { Dropdown } from "antd";
import { QuickMessage } from "@common/models";
import { useMemoizedFn } from "ahooks";

const Wrapper = styled.div`
  font-size: 12px;
  padding: 10px;
  transition: 200ms;
  cursor: pointer;

  &:hover {
    background: whitesmoke;
  }

  .quick-message {
    &__summary {
      display: flex;
      align-items: center;
      margin-bottom: 4px;
    }

    &__settings {
      margin-right: 4px;
      cursor: pointer;
      transition: 200ms;

      &:hover {
        opacity: 0.6;
      }
    }

    &__title {
      font-weight: bolder;
      margin-right: 10px;
    }

    &__shortcut {
      color: grey;
    }

    &__content {
    }
  }
`;

export function QuickMessageCard({
  onEditClick,
  onDeleteClick,
  record,
  readonly,
  onSelect,
}: {
  onEditClick: (record: QuickMessage) => void;
  onDeleteClick: (record: QuickMessage) => void;
  record: QuickMessage;
  onSelect?: (content: string) => void;
  readonly?: boolean;
}) {
  const onClick = useMemoizedFn(() => {
    if (onSelect) {
      onSelect(record.content);
    }
  });

  return (
    <Wrapper
      className={"quick-message"}
      data-id={record.id}
      onClick={readonly ? onClick : undefined}
    >
      <div className={"quick-message__summary"}>
        {!readonly && (
          <div className={"quick-message__settings"}>
            <Dropdown
              menu={{
                items: [
                  {
                    key: "edit",
                    label: "编辑",
                    onClick: () => onEditClick(record),
                  },
                  {
                    key: "delete",
                    label: "删除",
                    onClick: () => onDeleteClick(record),
                  },
                ],
              }}
            >
              <SettingOutlined />
            </Dropdown>
          </div>
        )}
        <div className={"quick-message__title"}>{record.title}</div>
        <div className={"quick-message__shortcut"}>{record.shortcut}</div>
      </div>
      <div className={"quick-message__content"}>{record.content}</div>
    </Wrapper>
  );
}
